<template>
  <div class="box">
    <div class="bgc">
      <header>
        <i class="el-icon-back" @click="$router.push('/enterprise')">返回</i>
        <span style="margin-left:20px">{{ title }}</span>
      </header>
      <!-- 企业信息 -->
      <el-card shadow="never" class="card">
        <span class="span">企业信息</span>
        <el-row>

          <el-form ref="formRef" label-width="80px" :model="enterpriseForm" :rules="rules">
            <el-col :span="12">
              <el-form-item label="企业名称" prop="name">
                <el-input v-model="enterpriseForm.name" placeholder="请输入企业名称" />
              </el-form-item>
            </el-col>
            <!--  -->
            <el-col :span="12">
              <el-form-item label="法人" prop="legalPerson">
                <el-input v-model="enterpriseForm.legalPerson" placeholder="请输入法人" />
              </el-form-item>
            </el-col>
            <!--  -->
            <el-col :span="12">
              <el-form-item label="注册地址" prop="registeredAddress">
                <el-input v-model="enterpriseForm.registeredAddress" placeholder="请输入注册地址" />
              </el-form-item>
            </el-col>
            <!--  -->
            <el-col :span="12">
              <el-form-item label="所在行业" prop="industryCode">
                <!-- <el-input v-model="enterpriseForm.industryCode" /> -->
                <el-select v-model="enterpriseForm.industryCode" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in industryList"
                    :key="index"
                    :label="item.industryName"
                    :value="item.industryCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!--  -->
            <el-col :span="12">
              <el-form-item label="营业执照">
                <el-upload
                  action=""
                  accept="image/png,image/jpg,image/jpeg"
                  :before-upload="handleBeforeUpload"
                >
                  <el-button size="small" type="primary" icon="el-icon-upload2" :disabled="fileName===''?false:true">上传文件</el-button>
                  <div v-if="fileName!==''" slot="tip">
                    <span>{{ fileName }}</span>
                    <i class="el-icon-view" style="margin-left:50px" />
                    <i class="el-icon-delete" style="margin-left:20px" />
                  </div>
                  <div slot="tip" class="el-upload__tip">支持扩展名: .png .jpg .jpeg, 文件大小不得超过5M</div>
                </el-upload>
              </el-form-item>
            </el-col>

          </el-form></el-row>

      </el-card>
      <el-card shadow="never" class="card">
        <span class="span">联系人信息</span>
        <el-row>
          <el-form ref="formRef2" title="联系人信息" :model="enterpriseForm" :rules="rules">
            <el-col :span="12">
              <el-form-item label="企业联系人" prop="contact">
                <el-input v-model="enterpriseForm.contact" placeholder="请输入企业联系人" />
              </el-form-item>
            </el-col>
            <!--  -->
            <el-col :span="12">
              <el-form-item label="联系电话" prop="contactNumber">
                <el-input v-model="enterpriseForm.contactNumber" placeholder="请输入企业联系人" />
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-card>
    </div>
    <div class="btn">
      <el-button @click="handelReset">重置</el-button>
      <el-button type="primary" @click="handelConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import { addEnterprise, getIndustry, watchInfo, editEnterprise } from '@/api/enterprise'
import { uploadFile } from '@/api/upload'
export default {
  data() {
    return {
      fileName: '',
      industryList: [],
      enterpriseForm: {
        name: '',
        legalPerson: '',
        registeredAddress: '',
        industryCode: null,
        businessLicenseUrl: '',
        businessLicenseId: null, // 上传文件id
        contact: '',
        contactNumber: ''
      },
      rules: {
        name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        legalPerson: [{ required: true, message: '请输入企业法人', trigger: 'blur' }],
        registeredAddress: [{ required: true, message: '请输入企业注册地址', trigger: 'blur' }],
        industryCode: [{ required: true, message: '请选择所在行业', trigger: 'change' }],
        contact: [{ required: true, message: '请输入企业联系人', trigger: 'blur' }],
        contactNumber: [{ required: true, message: '请输入物业费', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title() {
      return this.$route.params.id ? '编辑企业' : '新增企业'
    }
  },
  async created() {
    await this.getIndustry()
    await this.watchInfo()
  },
  methods: {
    // async addEnterprise() {
    //   const res = await addEnterprise(this.enterpriseForm)
    //   console.log(res)
    // },
    // 获取企业信息,查看企业信息来获取
    async watchInfo() {
      // 路由传参
      const id = this.$route.params.id
      //   如果是新增模式, 没有参数的, 就不用获取企业信息
      if (!id) return
      const res = await watchInfo(id)
      console.log(res.data)
      this.enterpriseForm = res.data.data
      this.fileName = res.data.data.businessLicenseName
    },
    // 获取企业列表
    async getIndustry() {
      const res = await getIndustry()
      console.log(res)
      this.industryList = res.data.data
      console.log(this.industryList)
    },
    // 上传文件, 原生的 上传前的钩子函数
    async handleBeforeUpload(file) {
    //   console.log(file)
      try {
        const formDate = new FormData()
        formDate.append('file', file)
        formDate.append('type', 'businessLicense')
        // 上传两个请求参数
        const res = await uploadFile(formDate)
        console.log(res.data)
        this.enterpriseForm.businessLicenseUrl = res.data.data.url
        this.enterpriseForm.businessLicenseId = res.data.data.id
        this.fileName = res.data.data.name

        this.$message.success('上传成功')
      } catch (e) {
        console.log(e)
      }
      //   this.fileList.push({ name: res.data.data.name, url: res.data.data.url })
      return Promise.reject() // 在上传前阻止action默认上传, action 直接写  "" 就行
    },
    async handelConfirm() {
      try {
        await this.$refs.formRef.validate()
        await this.$refs.formRef2.validate()
        if (this.$route.params.id) {
          // 编辑
          this.enterpriseForm.id = Number(this.$route.params.id)
          const obj = { ...this.enterpriseForm }
          // delete obj.businessLicenseId
          delete obj.rent
          delete obj.industryName
          delete obj.businessLicenseName

          //   console.log(obj)
          const res = await editEnterprise(obj)
          console.log(res)
          this.$message.success(res.data.msg)
        } else {
          const res = await addEnterprise(this.enterpriseForm)
          console.log(res)
          this.$message.success(res.data.msg)
        }
        this.$router.push('/enterprise')
      } catch (e) {
        console.log(e)
        // this.$message.error()
      }
    },
    // 重置
    handelReset() {
      this.$refs.formRef.resetFields()
      this.$refs.formRef2.resetFields()
    }
  }
}
</script>

<style scoped lang='scss'>
header{
    height: 50px;
    margin-top: 20px;
    padding-left: 20px;
    background-color: white;
    line-height: 50px;
     i {
        cursor: pointer;
     }
     span {
        font-weight: 700;
     }
}
.card {
    width: 70%;
    margin: 20px auto;
}
.el-input {
    width: 400px;
}
.span {
    // background-color: pink;
    margin-bottom: 20px;
    font-weight: 700;
}
.el-card {
   border-radius: 0;
}
.el-form {
    margin-top: 30px;
}
.bgc {
    height: 80vh;
    background-color: #f4f6f8;
}
.box {
    height: 98vh;
    background-color: #fff;
}
.btn {
    text-align: center;
    margin-top: 20px;
}
</style>
